import React from 'react'
import Todolis from './todoitem.js'
import {Button,List,Input}from 'antd'
import store from '../ceshi/redux/store'

class Todolist extends React.Component{
    constructor(props){
        super(props);
        // console.log(store.getState())
        this.state= store.getState();
        this.handleStoreChange=this.handleStoreChange.bind(this)
        this.handleItemDelete=this.handleItemDelete.bind(this)
        store.subscribe(this.handleStoreChange)
        
    }

     handleStoreChange(){
         this.setState(store.getState())
     }
   handleChange=(e)=>{
       const action={
           type:'change_input_value',
           value: e.target.value
       }
       store.dispatch(action)

    
   }

   handleClick=()=>{
       const action={
           type:'chang_list',
           
       }
       store.dispatch(action)
   }


    // handleClick=()=>{
    //     this.setState({
    //         list :[...this.state.list, this.state.inputValue]

    //     })
       
        
    // }
    // handleItemDelete=(index)=>{
    //     const list = [...this.state.list]
   
    //     list.splice(index,1)
    //     this.setState({
    //         list:list
    //     })

    // }
    handleItemDelete =(index)=>{
        //  alert (index)
        const action={
            type:'delete_item',
            index
        }
        store.dispatch(action)
    }
    render(){
        return(
        <div>

        
        <div style={{marginTop:20}}>
            <Input placeholder='' value={this.state.inputValue} onChange={this.handleChange}></Input>
            <Button onClick={this.handleClick}> 提交</Button>
            <List
                size="small"
                bordered
                dataSource={this.state.list}
                renderItem={(item,index) => <List.Item onClick={this.handleItemDelete}>{item}</List.Item>}
                
    />
    <Input></Input>
        </div>
        
        <ul>
 
          {
              this.state.list.map((item,index)=>{
                  
                    return (
                        <div>

                        <Todolis content={item}  deleteItem={ this.handleItemDelete}/>
                        </div>
                    )
                    
                   

              })
          }
        
        
         
        </ul>

     </div>
        )
    }
}
export default Todolist